<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <select name="" id="province">
        <option value="">请选择</option>
        <option value="0">浙江省</option>
        <option value="1">广东省</option>
        <option value="2">湖北省</option>
    </select>

    <select name="" id="city">

    </select>


    <script>
        //获取城市和省份的文档对象
        const provinceObj = document.querySelector("#province")
        const cityObj = document.querySelector("#city")
        // console.log(provinceObj)
        const zj = ['嘉兴', '杭州', '衢州']
        const gd = ['东莞', '广州']
        const hb = ['黄山', '荆州', '洞庭湖']

        //有城市的数组
        const initCity = [
            ['嘉兴', '杭州', '衢州'],
            ['东莞', '广州'],
            ['黄山', '荆州', '洞庭湖']
        ]

        console.dir(provinceObj)




        provinceObj.addEventListener("change", function () {
            //初始化
            cityObj.innerHTML = 's'

            //获取省份对应的值
            const provinceindex = provinceObj.options[provinceObj.selectedIndex].value
            //  console.log(provinceindex)
            //  console.log(provinceObj.options[provinceindex])
            const a = initCity[provinceindex]
            // console.log(a)

            for (const item of a) {
                const optionObj = document.createElement("option")
                optionObj.text = item;
                cityObj.appendChild(optionObj)
            }
        })
    </script>
</body>

</html>